<template>
  <div class="index">
    <div class="img_top">
      <img width="100%" src="../../static/img/blank.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">关于我</div>
      </div>
      <P class="about_p">你，我生命中一个重要的过客，我们之所以是过客，因为你未曾会为我停留。</P>
    </div>
    <div class="about_end" :data="TWebConfig">
      <div class="left">
          <div class="left_size">
            <h2>关于本站</h2>
            <p>"本站目前部署在阿里云的轻量应用服务器，配置为1核2G5M，学生价为114元/年"</p>
            <p>因为目前采用的配置比较低，有一些服务都没有启动，目前只启动的服务有 mogu-eureka，mogu-picture，mogu-sms，mogu-web，mogu-admin</p>
            <p>如果您想开启全部功能的话 ，推荐采用2核4G的云服务器进行本项目的部署</p>
            <p>最低配置：1核2G (需要开启虚拟内存)</p>
            <P>推荐配置：2核4G</P>
            <blockquote>
              <p>【阿里云】 限量爆款 低至69元/年<a href="https://www.aliyun.com/minisite/goods?userCode=w7aungxw" style="color: #409eff">点我进入</a><code>（仅限新用户）</code></p>
              <p>【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元<a href="https://cloud.tencent.com/act" style="color: #409eff">点我进入</a><code>（仅限新用户）</code> </p>
              <p>【阿里云翼计划】 1核2G 5M / 年 (博主目前使用的) 仅需114元<a href="https://promotion.aliyun.com/ntms/act/campus2018.html?spm=5176.10695662.1244717.1.641e5a06KpmU4A&accounttraceid=3ac1b990a4f445859080d2555566af8fiirr?userCode=w7aungxw&tag=share_component&share_source=copy_link?userCode=w7aungxw&tag=share_component&share_source=copy_link?userCode=w7aungxw&tag=share_component&share_source=copy_link" style="color: #409eff">点我进入</a><code>(仅限学生或未满24岁的用户)</code> </p>
            </blockquote>
            <p>&nbsp;</p>
            <hr>
            <h2>友链申请</h2>
            <p>如果您想和蘑菇博客交换友链，可以登录后，在个人中心的友链申请处进行申请（我会收到邮件通知~），或者也可以在留言板上进行留言，我看到后也会添加上去~</p>
            <ul>
              <li>请确定贵站可以稳定运营</li>
              <li>原创博客优先，技术类博客优先</li>
              <li>欢迎各位小伙伴一起互换友链</li>
            </ul>
            <h2>关于我</h2>
            <p>许志翔，目前就读于桂林电子科技大学，是一名研二的学生，所属计算机信息与安全学院，研究方向是教育大数据，是一名"不顾正业"的研究僧，沉迷于Java和Vue技术开发，梦想着进入BATJ，也将一直为此不断努力了~</p>
            <p>正宗95后，爱编程，爱旅游，爱生活，爱锻炼，从刚研究生入学后，就坚持着两件事，一个是写代码，一个就是每天5公里慢跑</p>
            <blockquote>
              <p>
                意志力和天生才华，都是人们在事实发生了之后再去赋予某个人的优点：杰森是位不可思议的网球选手，因此，他一定生下来就具有这种才华；杰尼年复一年地练习拉小提琴，每天坚持几个小时，因此，他一定有着令人难以置信的意志力。
              </p>
              <p>
                ——《刻意练习：从新手到大师》
              </p>
            </blockquote>
            <p>平时喜欢把学习上遇到的问题以博客的方式记录下来，主要目的是为了巩固自己的知识，在以后遇到问题的时候，能够非常快速的查阅</p>
            <blockquote>
              <p>内心没有阳光的人温暖不了别人。用心写博客，知识不是高谈阔论，是现实点点滴滴的积累</p>
            </blockquote>
            <p>最近可能随着研究生生涯过半，已经要着手开始写小论文的事情了，博客项目的更新估计会变的比较缓慢，应该不会存在大版本的更新迭代了，不过每天应该会抽出一点点时间，来解决博客存在的问题~</p>
            <p>
              目前博客项目的技术功能也编写的差不多，可能还要做的就是SEO优化，后面一段时间应该注重于网站的稳定性和BUG的解决，要是小伙伴在使用的时候，发现了什么问题，欢迎私聊我，或者在QQ群里提出~
            </p>
            <p>在今年的8、9月份，也该着手于校招了，后面应该更多的时间沉淀在Java的基础学习了，当然如果有老哥有内推名额的话，欢迎推荐我一下下...</p>
            <p><img class="img1" src="http://image.moguit.cn/52552ed0efb245a9a67d5c9928d72e14" ></p>
            <P>回顾2019年，每天也会在项目中，花费一些时间去提交代码，可能有的时候是增加了新功能，有的时候是解决一个BUG，到现在已经成为了一个习惯了，因此博客项目中也添加了比较多的有趣的功能，比如这个文章贡献度</P>
            <hr>
          </div>

      </div>
      <div class="right_01">
        <div class="about">
          <div class="touxiang">
            <p class="el-avatar">
              <img src="http://image.moguit.cn/a98f4d99b8e9406f9d10f511e0207bc4"alt>
            </p>
          </div>

          <p class="abname">蘑菇</p>
          <p class="abposition">Java开发</p>
          <p class="abtext">一个95后！正在潜心研究机器学习和Java后端技术，一边学习一边积累经验</p>
        </div>
      </div>
      <div class="right_02">
        <div class="tit02">
          <p class="guanzhu">关注我们，么么哒</p>
        </div>
        <div class="tit03">
          <div class="tit040">
            <div class="tit05">
              <p class="icon_p"><i class="el-icon-s-custom"></i></p>
              <p style="float: left;margin-top: 12px;margin-left: 20px"><a href="//shang.qq.com/wpa/qunwpa?idkey=080084c9292fd13b330993c29f0a5ae0ab79ec72b2ad9227846d71afe6b5e6bb" target="_blank">1062945857</a> </p>
            </div  >
            <el-tag class="tag" type="success" effect="dark">QQ群</el-tag>
          </div>
          <div class="tit041">
            <div class="tit05">
              <p class="icon_p"><i class="el-icon-office-building"></i></p>
              <p style="float: left;margin-top: 12px;margin-left: 20px"><a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1632857395" target="_blank">1632857395</a></p>
            </div>
            <el-tag class="tag" type="info" effect="dark">QQ号</el-tag>
          </div>
          <div class="tit042">
            <div class="tit05">
              <p class="icon_p"><i class="el-icon-collection-tag"><a href="mailto" target="_blank" >1632857395@qq.com</a></i></p>
              <p style="float: left;margin-top: 12px;margin-left: 20px"></p>
            </div>
            <el-tag class="tag" type="danger" effect="dark">邮箱账号</el-tag>
          </div>
          <div class="tit043">
            <div class="tit05">
              <p class="icon_p"><i class="el-icon-chat-line-square"><a href="https://github.com/moxi624 "target="_blank">https://github.com/moxi624</a> </i></p>
              <p style="float: left;margin-top: 12px;margin-left: 20px"></p>
            </div>
            <el-tag class="tag" type="" effect="dark">Github</el-tag>
          </div>
          <div class="tit044">
            <div class="tit05">
              <p class="icon_p"><i class="el-icon-copy-document"><a href="https://gitee.com/li986767" target="_blank">https://gitee.com/li986767</a></i> </p>
              <p style="float: left;margin-top: 12px;margin-left: 20px"></p>
            </div>
            <el-tag class="tag" type="warning" effect="dark">Gitee</el-tag>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
export default {
    data(){
      return{
      TWebConfig:{}
      }
    },
  methods:{
      findAll:function () {
            var _this=this;
        axios.get("/api/search/findAll2").then(function (res) {
          console.log(res.data);
          _this.TWebConfig=res.data
        })
      }
  },
  mounted:function() {
      this.findAll();
  }
}
</script>

  <style>
    .index{
      background-color: #ffffff;
    }
    .img1{
      width: 650px;
      height: auto;
    }
    blockquote {
      overflow: hidden;
      padding-right: 1.5em;
      padding-left: 1.5em;
      margin-left: 0;
      margin-right: 0;
      font-style: italic;
      border-left: 5px solid #fefefe;
    }
    .touxiang{
      background:url("../../static/img/back.png");
      margin-left: -38px;
      width: 360px;
      margin-bottom: 50px;
    }
    .left_size{
      line-height: 1.8;
      font-size: 16px;
      text-align: justify;
    }
    .tag{
      height: 40px;
      width: 80px;
      float: right;
      line-height: 40px;
      margin-right: -1px;
    }
    .tag:hover{
      width: 100px;
      transition: 0.3s;
    }
    .btn_sp{
      margin-right: -172px;
      height: 40px;
      width: 98px;

    }
    .sp{
      line-height: 40px;
      float: left;
      margin-left: 30px;
    }
    a{
      color: #000;
      text-decoration:none
    }
    .php{
      height: 40px;
      width: 170px;

      margin-left: 15px;
    }
    .icon_p{
      float: left;
      margin-left: 20px;
      margin-top: 11px;
    }
    .tit05{
      height: 40px;
      width: 190px;
      float: left;

    }
    .guanzhu{
      font-size: 20px;
      line-height: 60px;
      float: left;
      margin-left: 30px;
    }
    .tit02{
      width: 360px;
      height: 80px;

      margin-top: -20px;
      border-bottom: 2px #000 solid;
    }
    .tit02:hover{
      transition: .10s;

      border-bottom: 2px #e2523a solid;
    }
    .tit03{
      padding-top: 30px;
      width: 380px;
      height: 320px;

    }
    .el-avatar{
      margin: 40px auto 20px;
      width:100px;
      height: 100px;

      border-radius:50%;
    ;
    }
    .tit040{
           width: 300px;
           height: 40px;
           margin-left: 40px;
           margin-top: 20px;
           border: 1px solid #67c23a;
         }
    .tit040:hover{
      color: #67c23a;
    }
    .tit041{
      width: 300px;
      height: 40px;
      margin-left: 40px;
      margin-top: 20px;
      border: 1px solid #909399;
    }
    .tit041:hover{
      color: #909399;
    }
    .tit042{
      width: 300px;
      height: 40px;
      margin-left: 40px;
      margin-top: 20px;
      border: 1px solid #f56c6c;
    }
    .tit042:hover{
      color: #f56c6c;

    }
    .tit043{
      width: 300px;
      height: 40px;
      margin-left: 40px;
      margin-top: 20px;
      border: 1px solid #409eff;
    }
    .tit043:hover{
      color: #409eff;
    }
    .tit044{
      width: 300px;
      height: 40px;
      margin-left: 40px;
      margin-top: 20px;
      border: 1px solid #e6a23c;
    }
    .tit044:hover{
      color: #e6a23c;
    }
    .right_01{
      width: 360px;
      height: 400px;
      box-shadow: #ffffff 0 0 0.7rem;
      float: right;
    }
    .right_02{
      width: 360px;
      height: 440px;
      float: right;
      margin-top: 30px;
      box-shadow: #ffffff 0 0 0.7rem;
    }
    .left{
      width: 765px;
      height: 1800px;
      background-color: #fafbff;
      float: left;
      text-align: justify;
      line-height: 2;
      padding-left: 50px;
    }
.about {
  width: 80%;
  height: 60px;
  margin-left: 10%;
  background-color: #f8f8f8;
  border-bottom: 1px #000 solid;
}
.about_end {
  width: 80%;
  margin-left: 10%;
  height: 2000px;
  background-color: #f6f6f6;
}
.about_btn{
    position: absolute;
    left: 160px;
    top: 310px;
}
.about_p{
    float:right;
    margin-right: 30px;
    line-height: 40px;
}
.about_mess1{
    width: 100px;
    height: 40px;
    background-color: #000000;
    float: left;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 14px;
}
.about_mess2{
    width: 100px;
    height: 40px;
    background-color: #3a6ab5;
    float: left;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 14px;
}
</style>
